<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/ui.xhtml">

    <ui:define name="content">
    
        <h1 class="title ui-widget-header ui-corner-all">TabView - Model Append</h1>
        
        <div class="entry">
        	<p:commandButton type="button" onclick="tabDialog.show()" value="Add a New Tab" image="add"/>
        	
            <p>Tabview can display dynamic number of tabs backed by a model. As tabs are generated on-the-fly it is easy
            to implement adding/removing tabs as well.</p>

			<h:form id="form" prependId="false">
			
			<p:growl id="growl" showDetail="true" />

            <p:tabView id="playersT" widgetVar="playersTabView" activeIndex="#{tabBean.activeIndex}"
            	var="player" value="#{tabBean.players}">

				<p:ajax event="tabClose" listener="#{tabBean.onTabClosePlayer}" update=":form:growl" />

                <p:tab title="#{player.name}" closable="#{player.closeable}">
                    <h:panelGrid columns="2" cellpadding="10">
                        <p:graphicImage value="/images/barca/#{player.photo}" />

                        <h:panelGrid columns="2" cellpadding="10">
                            <h:outputText value="Name: " />
                            <h:outputText value="#{player.name}" style="font-weight: bold"/>

                            <h:outputText value="Number: " />
                            <h:outputText value="#{player.number}" style="font-weight: bold"/>

                            <h:outputText value="Position: " />
                            <h:outputText value="#{player.position}" style="font-weight: bold"/>
                        </h:panelGrid>

                    </h:panelGrid>
                    
                </p:tab>

            </p:tabView>
            
            <p:dialog widgetVar="tabDialog" showEffect="explode" hideEffect="explode" header="New Tab">
                <h:panelGrid columns="2" cellpadding="10">
                    <h:panelGrid columns="2" cellpadding="10">
                        <h:outputText value="Name: " />
                        <h:inputText value="#{tabBean.addPlayer.name}"/>

                        <h:outputText value="Number: " />
                        <h:inputText value="#{tabBean.addPlayer.number}"/>

                        <h:outputText value="Position: " />
                        <h:inputText value="#{tabBean.addPlayer.position}"/>
                    </h:panelGrid>
                </h:panelGrid>
                
                <center>
                	<p:commandButton actionListener="#{tabBean.addTab}" onclick="tabDialog.hide()" update="playersT" value="Add" image="add"/>
                </center>
            </p:dialog>
			
			</h:form>

            <h3>Source</h3>
            <p:tabView>
                <p:tab title="tabviewModel.xhtml">
                    <pre name="code" class="xml">
&lt;h:form prependId="false"&gt;

	&lt;p:growl id="growl" showDetail="true" /&gt;

	&lt;p:tabView id="playersT" widgetVar="playersTabView" activeIndex="\#{tabBean.activeIndex}"
		var="player" value="\#{tabBean.players}"&gt;

		&lt;p:ajax event="tabClose" listener="\#{tabBean.onTabClosePlayer}" update=":form:growl" /&gt;

        &lt;p:tab title="\#{player.name}" closable="\#{player.closeable}"&gt;
            &lt;h:panelGrid columns="2" cellpadding="10"&gt;
                &lt;p:graphicImage value="/images/barca/\#{player.photo}" /&gt;

                &lt;h:panelGrid columns="2" cellpadding="10"&gt;
                    &lt;h:outputText value="Name: " /&gt;
                    &lt;h:outputText value="\#{player.name}" style="font-weight: bold"/&gt;

                    &lt;h:outputText value="Number: " /&gt;
                    &lt;h:outputText value="\#{player.number}" style="font-weight: bold"/&gt;

                    &lt;h:outputText value="Position: " /&gt;
                    &lt;h:outputText value="\#{player.position}" style="font-weight: bold"/&gt;
                &lt;/h:panelGrid&gt;

            &lt;/h:panelGrid&gt;
            
        &lt;/p:tab&gt;

	&lt;/p:tabView&gt;
        
    &lt;p:dialog widgetVar="tabDialog" showEffect="explode" hideEffect="explode" header="New Tab"&gt;
        &lt;h:panelGrid columns="2" cellpadding="10"&gt;
            &lt;h:panelGrid columns="2" cellpadding="10"&gt;
                &lt;h:outputText value="Name: " /&gt;
                &lt;h:inputText value="\#{tabBean.addPlayer.name}"/&gt;

                &lt;h:outputText value="Number: " /&gt;
                &lt;h:inputText value="\#{tabBean.addPlayer.number}"/&gt;

                &lt;h:outputText value="Position: " /&gt;
                &lt;h:inputText value="\#{tabBean.addPlayer.position}"/&gt;
            &lt;/h:panelGrid&gt;
        &lt;/h:panelGrid&gt;
        
        &lt;center&gt;
        	&lt;p:commandButton actionListener="\#{tabBean.addTab}" onclick="tabDialog.hide()" update="playersT" value="Add" image="add"/&gt;
         &lt;/center&gt;
     &lt;/p:dialog&gt;

&lt;/h:form&gt;
                    </pre>
                </p:tab>
                
                <p:tab title="TabBean.java">
                    <pre name="code" class="java">
package org.primefaces.examples.view;

import java.util.ArrayList;
import java.util.List;
import org.primefaces.examples.domain.Player;

public class TabBean {
    
    private List&lt;Player&gt; players;
    
    private Player addPlayer = new Player();
    
    private int activeIndex;

    public TabBean() {
        players = new ArrayList&lt;Player&gt;();
        
        players.add(new Player("Messi", 10, "messi.jpg", "CF"));
        players.add(new Player("Iniesta", 8, "iniesta.jpg", "CM"));
        players.add(new Player("Villa", 7, "villa.jpg", "CF"));
        players.add(new Player("Xavi", 6, "xavi.jpg", "CM"));
        players.add(new Player("Puyol", 5, "puyol.jpg", "CB"));
    }

    public List&lt;Player&gt; getPlayers() {
        return players;
    }
    
    public void onTabClose(TabCloseEvent event) {
		FacesMessage msg = new FacesMessage("Tab Closed", "Closed tab: "
				+ ((Player) event.getData()).getName());

		FacesContext.getCurrentInstance().addMessage(null, msg);
		
		players.remove(event.getData());
	}

	public void addTab(ActionEvent event) {
		addPlayer.setPhoto("messi.jpg");
		players.add(addPlayer);
		addPlayer = new Player();
		activeIndex = players.size() - 1;
	}
	
	public Player getAddPlayer() {
		return addPlayer;
	}

	public void setAddPlayer(Player addPlayer) {
		this.addPlayer = addPlayer;
	}

	public int getActiveIndex() {
		return activeIndex;
	}

	public void setActiveIndex(int activeIndex) {
		this.activeIndex = activeIndex;
	}
	
}

                    </pre>
                </p:tab>
            </p:tabView>
        </div>

    </ui:define>
</ui:composition>